<template>
	<div id="main" class="main">
		<div class="main-left clearfix" style="padding:40px 0;">
			<!--商品图片-->
			<div class="goodsimg">
				<div class="goodsbigimg">
					<img :src="$baseUrl + good.cover.slice(2)">
				</div>
			</div>

			<div class="goodscont" style="text-align: left;">
				<div class="goodsname">{{ good.name }}</div>
				<div class="goodsdis">{{ good.intro }}</div>
				<div class="goodsnorms gattr">
					<span class="tit">规 格</span>
					<span style="cursor: pointer" class="gnorms norm-active">
						<i class="iconfont icon-xuanzhong3"></i>
						{{ good.spec }}
					</span>
				</div>
				<div class="goodsnorms gattr">
					<span>库存</span>
					<span class="tit">{{ good.stock }}</span>
				</div>
				<div class="goodsprices gattr">
					<span class="tit">价 格</span>
					<span class="opri">￥<span class="opcont" id="goodssprice">{{ good.price }}</span></span>
				</div>
				
			<div class="goodsnum gattr">
				<span class="tit">数 量</span>
				<input type="button" id="gcut" class="btn" value="-" style="cursor: pointer" @click="cut"/>
				<input type="text" name="goods_num" id="sum" v-model="num" />
				<input type="button" id="gadd" class="btn" value="+" style="cursor: pointer" @click="add"/>
			</div> 
				<div class="handle" style="border:none">
					<p class="addcart" data-id="good.id" @click="addToCarts">加入购物车</p>
					<p class="buy" @click="toPay">立即购买</p>
				</div>
			</div>

			<!--大家都在买-->
			<div class="allbuy">
				<div class="tit"><s></s>大家都在买<s></s></div>
				<div class="abgoods">
					<div class="goodspage">

						<div class="goods">
							<a @click="$router.push({ path: '/goodsDetail?id=32' })"><img src="@/assets/img/4-6.jpg" /></a>
							<p class="goodsprice">￥<span>12</span></p>
							<a href="detail?id=32">
								<p class="goodsname">即品坚果 台湾甄选 颗颗饱满</p>
							</a>
						</div>

						<div class="goods">
							<a @click="$router.push({ path: '/goodsDetail?id=6' })"><img src="@/assets/img/1-6.jpg" /></a>
							<p class="goodsprice">￥<span>9</span></p>
							<a href="detail?id=6">
								<p class="goodsname">栖霞苹果 爽脆清甜</p>
							</a>
						</div>

					</div>
				</div>
			</div>
		</div>

		<!--商品详情-->
		<div id="cont">
			<div class="goodsmain">
				<div class="goodstit">
					<ul>
						<li id="g1" class="active">商品详情</li>
						<!-- <li id="g2" class="">用户评价<span>（5）</span></li>
					<li id="g3">售后服务</li> -->
					</ul>
				</div>
				<div class="gmain">
					<div class="main xq">
						<div class="dateilsimg" style="display: block;">
							{{ good.content }}
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import { getGoodsDetail } from '@/request/goods.js'
import { addCarts } from '@/request/cart.js'
export default {
	name: 'goodsDetail',
	data() {
		return {
			good: {},
			num:1
		};
	},
	watch: {
		$route(to, from) {
			this.getGoods(this.$route.query.id)
		}
	},
	created() {
		this.getGoods(this.$route.query.id)
	},
	methods: {
		toPay(){
			this.$router.push({name:'pay',params:{payInfo:[{...this.good,amount:this.num}]}})
		},
		cut(){
			if(this.num<2){
				this.$message.warning('不能再减了~')
				return
			}
			this.num--
		},
		add(){
			if(this.num>this.good.stock){
				this.$message.warning('超过库存啦~')
				return
			}
			this.num++
		},
		addToCarts(){
			addCarts({
				amount:this.num,
				goodId:this.good.id,
				userId:JSON.parse(localStorage.getItem('user')).id
			}).then(res=>{
				this.$message.success('加入购物车成功!')
			})
		},
		getGoods(id) {
			this.$route.query.id = id
			getGoodsDetail(id).then(res => {
				this.good = res.data
			})
		},
		changeGoodUrl() {

		},
		findPage() {

		},
		initData() {

		}
	},
};
</script>

<style scoped>
@import url('@/assets/css/public.css');
@import url('@/assets/css/common.css');
@import url('@/assets/css/detail.css');
@import url('@/assets/css/reclassify.css');
</style>